<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!--引入bootstrap核心样式-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <h1 class="text-center" style="margin-top:70px">用户登录</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名：</label>
                        <input type="text" class="form-control" id="username" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">密码</label>
                        <input type="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                    <div class="clearfix"></div>
                    <button class="btn btn-danger col-sm-6" style="margin-top:10px;">登录</button>
                </form>
            </div>

        </div>

    </div>
    <script src="../utils.js"></script>
    <script>
        /* 阻止默认行为 
            事件对象.preventDefault()


            window.location.href = '新的页面地址'
        */

        // 采用ajax 实现登录 
        // 4步 
        // 获取用户输入的用户名和密码 验证 如果通过跳转到首页 
        // 不通过 弹框  用户名或者密码失败  
        const formele = document.querySelector('form');

        const username = formele.querySelector('#username');
        const password = formele.querySelector('#password');

        // 表单的提交 和 reset 必须绑定在form上  否则不生效  

        formele.addEventListener('submit',submitFn);

        async function submitFn(e){
            // 点击提交以前阻止默认行为  
            e.preventDefault();
            // 获取用户输入的内容
            const userinfo = {
                username:username.value,
                password:password.value
            }

            const res = await myajax({
                url:'http://localhost:8080/users/login',
                method:'post',
                data:userinfo,
                dataType:'json'
            })

            // console.log(res);

            if(res.code !==1) return alert('用户名或者密码错误');

            alert('登录成功,马上跳转');
            window.location.href = './index.html'

        }

        
    </script>
</body>
</html>